iview多列指标筛选的表格

2023-04-26 11:19| 来源: 网络整理| 查看: 265

前言：

想要实现Iview UI专业版的多列指标筛选的表格不是梦，就像这样与表格联动实现筛选列功能

1、首先可以先看看iview免费版的多列指标筛选的表格（https://www.iviewui.com/components/table） 2、代码案例

1）先做点击出现列设置的icon

列展示 {{item.text}}

先用了一下下拉菜单组件把最上面的icon和下面展示的复选框都括在一起，Dropdown 的为什么选择custom触发而不选择click是因为如果选择click触发那么点击一次下拉菜单就会缩回，如果用custom触发就不会缩回给我们一直选择想筛选的列设置，并用:visible="visible"控制下拉框的显示。（css就不放了哦）

2）data数据初始化化

data () { return { visible:false, columnDisplay: {id:0,label:"id",text:'id'}, {id:1,label:"name",text:'用户名'}, {id:2,label:"number",text:'手机号'}, {id:3,label:"age",text:'年龄'}, {id:4,label:"email",text:'邮箱'}, {id:5,label:"sex",text:'性别'}, {id:6,label:"state",text:'状态'}, {id:7,label:"date",text:'创建时间'}, {id:8,label:"action",text:'操作'}, tableColumnsChecked: ["id","name","number","age","email","sex","state","date","action"], //tableColumnsChecked设置的是复选框初始选中项也是初始哪些表格列可以展示 } }

3）在methods中添加方法

// 多列指标筛选的表格 changeTableColumns () { this.columns = this.getTableColumns(); //注1：这里的columns是我表格列的名字要换成你们自己 }, getTableColumns () { const tableColumnList = { //注2：这里所有的列名都要和复选框的名字对应要不是表格就不显示了 selection: { type: 'selection', align: 'center', width:60 }, id: { title: 'id', key: 'id', align: 'center', width:80 }, name:{ title: '用户名', key: 'name', align: 'center', }, number:{ title: '手机号', key: 'number', align: 'center', }, age:{ title: '年龄', key: 'age', align: 'center', }, email:{ title: '邮箱', key: 'email', align: 'center', }, sex:{ title: '性别', key: 'sex', align: 'center', }, state:{ title: '状态', key: 'state', align: 'center', slot:'state' }, date:{ title: '创建时间', key: 'date', align: 'center', }, action:{ title: '操作', key: 'action', align: 'center', fixed: 'right', slot:'action' } }; let data = [tableColumnList.selection]; this.tableColumnsChecked.forEach(col => data.push(tableColumnList[col])); return data; //这三行是iview官网抄的 }, handleDrop(){ this.visible=!this.visible }, outClick(e){ let dropRef= this.$refs.dropRef.$el if(!dropRef.contains(e.target)&&this.visible){ this.visible=false } }, //handleDrop()函数和outClick()函数都是设置当点击下拉菜单本身的时候不实现缩回，当点击除自身以外的时候缩回下拉菜单

4）mounted钩子函数

设置初始化页面完成后，添加点击事件this.outClick和this.changeTableColumns数据初始化

mounted:function(){ document.addEventListener('click',this.outClick); this.changeTableColumns(); },

5）销毁监听事件

destroyed(){ document.removeEventListener('click',this.outClick) }

最后就完成啦--看看效果

点击下拉菜单不缩回的方法也是我和一个前辈学的，如果哪里说的不对或者还不懂得欢迎大家评论和批评指正

【本文地址】

公司简介

联系我们